<template>
	<div class="topic-wrapper">
		<my-c-divider :borderd="false" hint="更多" title="话题讨论"/>
		<div class="topics-container">
			<div class="topics-items" :style=" 'width:' + '180' * imgs_1.length + 'px;'">
				<div class="topics-item" v-for="(item, index) in imgs_1,info_1" :key="index">
					<div class="topics-left">
						<div class="topics-1">{{info_1[index][0]}}</div>
						<div class="topics-2">{{info_1[index][1]}}</div>
					</div>
					<img :src="imgs_1[index]" alt="img" class="topics-3"/>
				</div>
			</div>
		</div>
		<my-c-divider :borderd="false" hint="达人经验分享" title="热门动态"/>
		<div class="dynamics-1" v-for="(item,j) in imgs_2.length/3" :key="j">
			<div class="l-part">
				<div class="l-text-1">{{info_2[j][0]}}</div>
				<div class="l-text-2">{{info_2[j][1]}}</div>
				<img class="dynamics-img-1" :src="imgs_2[j]"/>
			</div>
			<div class="r-part">
				<div class="r-p-1">
					<div class="r-p-l">
						<div class="r-text-1">{{info_2[j+1][0]}}</div>
						<div class="r-text-2">{{info_2[j+1][1]}}</div>
					</div>
					<img class="dynamics-img-2" :src="imgs_2[j+1]"/>
				</div>
				<div class="r-p-2">
					<div class="r-p-l">
						<div class="r-text-1">{{info_2[j+2][0]}}</div>
						<div class="r-text-2">{{info_2[j+2][1]}}</div>
					</div>
					<img class="dynamics-img-3" :src="imgs_2[j+2]"/>
				</div>
			</div>
		</div>
		<my-c-divider :borderd="false" hint="达人经验分享" title="热门动态"/>
		<div class="dynamic-container">
			<div class="dynamic-items" :style=" 'width:' + '140' * imgs_3.length + 'px;'">

				<div style="background-image: url('https://forum.alexs.fun/hsr/t_3.png')"
						class="dynamic-item" v-for="(item, index) in imgs_3,info_3" :key="index">
					<div class="my-t-cover">
						<img :src="imgs_3[index]" alt="img" class="dynamic-3"/>
						<div class="dynamic-1">{{info_3[index][0]}}</div>
						<div class="dynamic-2">{{info_3[index][1]}}</div>
					</div>
				</div>

			</div>
		</div>
		<my-footer/>
	</div>
</template>

<script>
import MyCDivider from "@/pages/components/public/MyCDivider.vue";
import MyFooter from "@/pages/components/public/MyFooter";

export default {
	name: 'Topics',
	components: {
		MyCDivider, MyFooter
	},
	data() {
		return {
			imgs_1: [
				'https://forum.alexs.fun/hsr/t_1.png',
				'https://forum.alexs.fun/hsr/t_2.png',
				'https://forum.alexs.fun/hsr/t_3.png'
			],
			info_1: [
				["家居艺术", "怎样提升家居逼格"],
				["画龙点睛", "教你点缀的美"],
				["家居艺术", "怎样提升家居逼格"]
			],
			imgs_2: [
				'https://forum.alexs.fun/hsr/t_3.png',
				'https://forum.alexs.fun/hsr/t_4.png',
				'https://forum.alexs.fun/hsr/t_5.png'
			],
			info_2: [
				["精选装饰", "为家增添一丝特别"],
				["品质家具", "尽享夜的清幽"],
				["简约椅凳", "简约而不简单"]
			],
			imgs_3: [
				'https://forum.alexs.fun/hsr/t_6.png',
				'https://forum.alexs.fun/hsr/t_7.png',
				'https://forum.alexs.fun/hsr/t_8.png',
				'https://forum.alexs.fun/hsr/t_6.png'
			],
			info_3: [
				["10w左右的预算怎么装修", "1.3w人"],
				["国内有什么受欢迎的家居", "2231人"],
				["性价比高的进口家居", "8896人"],
				["10w左右的预算怎么装修", "1.3w人"]
			]
		};
	}
};
</script>

<style>
	.topics-container {
		width: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
		padding: 0 15px;
	}
	.topics-items {
		width: 100%;
		display: flex;
		align-items: center;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.topics-item {
		height: 100px;
		margin: 5px;
		display: flex;
		justify-content: space-between;
		background-color: #F6F6F6;
		border-radius: 20px;
		overflow: hidden;
	}
	.topics-1 {
		width: 60px;
		font-size: 15px;
		color: black;
		margin-left: 10px;
	}
	.topics-2 {
		font-size: 10px;
		color: gray;
		margin-left: 10px;
	}
	.topics-3 {
		margin-left: 5px;
	}
	.dynamics-1 {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		height: 200px;
		margin-top: 15px;
	}
	.l-part {
		flex: 1;
		display: flex;
		flex-direction: column;
		background-color: rgb(245, 231, 222);
		border-radius: 20px;
		margin: 5px 10px;
	}
	.r-part {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.r-p-2 .r-p-l,
	.r-p-1 .r-p-l {
		padding: 10px;
	}

	.r-p-1, .r-p-2 {
		display: flex;
		justify-content: space-between;
		margin: 5px 5px 5px 0;

		border-radius: 20px;
		overflow: hidden;
	}
	.r-p-1 {
		background-color: rgb(219, 228, 244);
	}
	.r-p-2 {
		background-color: rgb(214, 239, 236);
	}
	.l-text-1 {
		text-align: left;
		margin-top: 10px;
		margin-left: 10px;
		font-size: 20px;
	}
	.l-text-2 {
		text-align: left;
		margin-left: 10px;
		color: gray;
	}
	.dynamics-img-1 {
		height: 60%;
		margin-right: 5px;
		margin-left: 50%;
	}
	.dynamics-img-1 {
		height: 60%;
		margin-right: 5px;
		margin-left: 50%;
	}
	.r-text-1 {
		margin-left: 5px;
		font-size: 15px;
		margin-top: 5px;
		text-align: left;
	}
	.r-text-2 {
		margin-left: 5px;
		font-size: 10px;
		text-align: left;
	}
	.dynamic-container {
		width: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
	}
	.dynamic-items {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		height: 200px;
	}
	.dynamic-item {
		width: 125px;
		display: inline-block;
		flex-direction: column;
		align-items: center;
		background-color: rgb(61, 58, 58);
		margin: 5px 10px;
		overflow: hidden;
		border-radius: 20px;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.dynamic-1 {
		font-size: 10px;
		color: white;
		margin-bottom: 10px;
	}
	.dynamic-2 {
		font-size: 2px;
		color: white;
		bottom: 5px;
	}
	.dynamic-3 {
		width: 40%;
		border-radius: 50%;
		margin: 20px;
	}
	.my-t-cover {
		width: 100%;
		height: 100%;
		background-color: RGBA(0, 0, 0, 0.5);
	}
	.topics-left{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
</style>